<template>
  <div  v-show="show" v-cloak>
    <div>
      <Header ref="header"></Header>
    </div>
    <div>
      <div class="main-body">
        <div class="main-content">
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="car-info">
            <div class="right right-module">
              <div>
                <VehicleRight @getmoId="getId" :mo_id="moId" :ca_id="caId" :cate="catename" :mo_name="moName" :sKey="skeyname"></VehicleRight>
              </div>
            </div>
            <div class="answer_lo">
               <h1>{{CarDetail.mo_name}}</h1>
              <div class="pro_detail">
                <div class="pro_detailleft">
                  <img src="../../static/image/k_21.png" alt="" class="pro_l" @click="flclick">
                  <img src="../../static/image/k_22.png" alt="" class="pro_r" @click="frclick">
                 <!--<div class="splo_1">-->
                   <!--<swiper :options="swiperOption1" ref="mySwiper1">-->
                     <!--<swiper-slide v-for="(item,indexbanner) in CarDetail.mo_banner">-->
                       <!--<img :src="item" alt="">-->
                     <!--</swiper-slide>-->
                   <!--</swiper>-->
                 <!--</div>-->
                  <!--<div class="splo_2">-->
                    <!--<swiper :options="swiperOption" ref="mySwiper">-->
                      <!--<swiper-slide v-for="(item,indexbanner) in CarDetail.mo_banner">-->
                        <!--<img :src="item" alt="">-->
                      <!--</swiper-slide>-->
                      <!--<div class="swiper-pagination "  slot="pagination"></div>-->
                      <!--<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>-->
                      <!--<div class="swiper-button-next swiper-button-black" slot="button-next"></div>-->
                    <!--</swiper>-->
                  <!--</div>-->
                  <!-- 主要轮播 -->
                  <div class="splo_1">
                    <div class="swiper-container gallery-top">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in CarDetail.mo_banner">
                          <img :src="item">
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 导航轮播 -->
                  <div class="splo_2" style="padding: 0px 40px;">
                    <div class="swiper-container gallery-thumbs">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in CarDetail.mo_banner" style="width: 100px;">
                          <img :src="item">
                        </div>
                      </div>
                      <!-- 自定义翻页器-->
                      <div class="swiper-button-prev" style="opacity: 0"></div>
                      <div class="swiper-button-next" style="opacity: 0"></div>
                    </div>
                  </div>
                </div>
                <div class="pro_detailright">
                  <div style="height: 440px;">
                    <h1>{{CarDetail.mo_name}}</h1>
                    <h3>价格:<span>{{CarDetail.mo_guide_price}}</span></h3>
                    <p>车身颜色:</p>
                    <ul>
                      <li v-for="(item,index) in CarDetail.mo_body_color" :style="{'background': '#' + item.number}"></li>
                    </ul>
                    <p>内饰颜色:</p>
                    <ul>
                      <li v-for="(item,index) in CarDetail.mo_trim_color" :style="{'background': '#' + item.number}"></li>
                    </ul>
                  </div>
                  <div class="produce_btn">
                     <span class="span1">在线咨询</span>
                     <span class="span2" v-if="CarDetail.collection == '未收藏'" @click="collectionclick">收藏</span>
                     <span class="span2" v-if="CarDetail.collection == '已收藏'" @click="cancelcollection">取消收藏</span>
                  </div>
                </div>
              </div>
              <div class="assessmentlia">
                <ul class="assessmentli">
                  <li v-for="(item,index) in detailnav" :class="{'active' : navindex == index}" @click="navclick(index)"><span>{{item}}</span></li>
                </ul>
              </div>
              <div class="artice_con" id="artice_con0">
                <h1>基本配置</h1>
                <div class="base1">
                  <img :src="CarDetail.mo_configuration_image " alt="">
                  <div>
                    <ul>
                      <li>版本：{{CarDetail.mo_car_county}}</li>
                      <li>长-宽-高：{{CarDetail.mo_car_size}}</li>
                      <li>发动机：{{CarDetail.mo_car_engine}}</li>
                      <li>变速箱：{{CarDetail.mo_car_gearbox}}</li>
                      <li>车身结构：{{CarDetail.mo_car_body}}</li>
                      <li>燃油综合消耗量(升/100公里)：{{CarDetail.mo_car_oil}}</li>
                      <li>总排量(毫升)：{{CarDetail.mo_car_displacement}}</li>
                      <li>油箱容积(升)：{{CarDetail.mo_car_fuel}}</li>
                      <li>最高车速，近似值(公里/小时)：{{CarDetail.mo_car_maximum}}</li>
                    </ul>
                  </div>
                </div>
                <p class="baseq">配置详情：{{CarDetail.mo_configuring_details}}</p>
              </div>
              <div class="artice_con" id="artice_con1">
                <h1>配置升级</h1>
                <div class="updetail">
                  <span>单选配置:</span>
                   <div class="updetaila">
                     <Tooltip placement="top" max-width="200" :content="item.explain" v-for="(item,index) in CarDetail.mo_radio_disposition" :key="index">
                       <Button>{{item.title}}</Button>
                       <!--<div slot="content">-->
                         <!--<p>{{item.explain}}</p>-->
                       <!--</div>-->
                     </Tooltip>
                   </div>
                </div>
                <div class="updetail">
                  <span>配置包:</span>
                  <div class="updetaila">
                    <Tooltip placement="top" max-width="200" :content="item.explain" v-for="(item,index) in CarDetail.mo_configuration_package" :key="index">
                      <Button>{{item.title}}</Button>
                    </Tooltip>
                  </div>
                </div>
              </div>
              <div class="artice_con" id="artice_con2">
                <h1>车型实拍</h1>
                <p class="baseq" v-html="CarDetail.mo_content"></p>
              </div>
              <div class="artice_con" id="artice_con3">
                <h1>联系我们</h1>
                <div class="contance_us">
                   <div class="con_l">
                     <div class="con_l1">
                       <input type="number" placeholder="请填写您的手机号" v-model="info.mobile">
                     </div>
                     <div class="con_l2">
                       <input type="text" placeholder="请填写您的姓名" v-model="info.name">
                     </div>
                   </div>
                  <div class="con">
                    <input type="text" placeholder="详细地址" v-model="info.address">
                  </div>
                  <div class="contance_btn" @click="submit">确认提交</div>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
  let $ = require('jquery')
  import '../../node_modules/swiper/dist/css/swiper.css'
  import Swiper from 'swiper/dist/js/swiper.js'
  import 'iview/dist/styles/iview.css'
  import 'swiper/dist/css/swiper.css'
//  import Swiper from 'swiper'
//  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import Header from './Header'
  import Footer from './Footer'
  import Crumbs from './Crumbs'
  import VehicleRight from './VehicleRight'
//  import store from './store/index.js'
  export default {
    name: 'produceDetail',
    components: {
      Swiper,
//      swiperSlide,
      'Header': Header,
      'Footer': Footer,
      'Crumbs': Crumbs,
      'VehicleRight': VehicleRight
    },
    data () {
      return {
        name: '',
        count: 0,
        cate: '',
        skey: '',
        role: '',
        page: 0,
        limit: 6,
        show: false,
        getCarDetailAjax: true,
        mo_id: '',
        CarDetail: {},
        navindex: 0,
        detailnav: ['基本配置', '配置升级', '车辆实拍', '联系我们'],
        addContactUsAjax: true,
        info: {
          mobile: '',
          name: '',
          address: '',
          mo_id: ''
        }
      }
    },
    computed: {
      moId: function () {
        return this.mo_id
      },
      catename: function () {
        return this.cate
      },
      moName: function () {
        return this.CarDetail.mo_name
      },
      skeyname: function () {
        return this.skey
      },
      caId: function () {
        return ''
      }
    },
    created: function () {
      let thisObj = this
      window.onscroll = function () {
        var top
        if ($(window).scrollTop()) {
          top = $(window).scrollTop()
        } else if (document.body.scrollTop) {
          top = document.body.scrollTop
        }
        var height1 = $('#artice_con0').height() + 960
        var height2 = height1 + $('#artice_con1').height()
        var height3 = height2 + $('#artice_con2').height()
        if (top <= height1) {
          thisObj.navindex = 0
        } else if (height1 < top && top <= height2) {
          thisObj.navindex = 1
        } else if (height2 < top && top <= height3) {
          thisObj.navindex = 2
        } else if (top > height3) {
          thisObj.navindex = 3
        }
        if (top > 1100) {
          $('.assessmentlia').addClass('divClass2')
        } else {
          $('.assessmentlia').removeClass('divClass2')
        }
      }
      this.verify()
    },
    mounted: function () {
      this.$refs.header.skeysearch = this.skey
    },
    activated: function () {
      this.verify()
    },
    methods: {
      getId: function (id) {
        console.log()
        this.mo_id = id
        this.info.mo_id = this.mo_id
        this.getCarDetail()
      },
      flclick: function () {
        $('.swiper-button-prev').click()
      },
      frclick: function () {
        $('.swiper-button-next').click()
      },
      collectionclick: function () {
        let thisObj = this
        thisObj.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            data: {
              mo_id: thisObj.mo_id
            },
            slient: false,
            userinfo: true,
            url: 'Car/addUserCollection',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.$vux.toast.show({
                  text: '收藏成功',
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
                thisObj.CarDetail.collection = '已收藏'
              } else {
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        })
      },
      cancelcollection: function () {
        let thisObj = this
        thisObj.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            data: {
              mo_id: thisObj.mo_id
            },
            slient: false,
            userinfo: true,
            url: 'Car/delUserCollection',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.$vux.toast.show({
                  text: '取消收藏成功',
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
                thisObj.CarDetail.collection = '未收藏'
              } else {
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        })
      },
      submit: function () {
        let thisObj = this
        if (thisObj.info.mobile === '') {
          thisObj.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!thisObj.isMobile(thisObj.info.mobile)) {
          thisObj.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (thisObj.info.name === '') {
          thisObj.$vux.toast.show({
            text: '请输入您的姓名',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (thisObj.info.address === '') {
          thisObj.$vux.toast.show({
            text: '请输入您的详细地址',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!thisObj.addContactUsAjax) {
          return false
        }
        thisObj.addContactUsAjax = false
        thisObj.$chaos.ajax({
          data: thisObj.info,
          slient: false,
          userinfo: false,
          url: 'Car/addContactUs',
          callback: function (type, res) {
            thisObj.addContactUsAjax = true
            if (res.status === 'SUCCESS') {
              thisObj.$vux.toast.show({
                text: '提交成功',
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
              thisObj.info = {
                mobile: '',
                name: '',
                address: '',
                mo_id: ''
              }
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      navclick: function (index) {
        this.navindex = index
        var height1 = $('#artice_con0').height() + 1101
        var height2 = height1 + $('#artice_con1').height()
        var height3 = height2 + $('#artice_con2').height()
        if (index === 0) {
          window.scrollTo(0, 900)
        }
        if (index === 1) {
          window.scrollTo(0, height1)
        }
        if (index === 2) {
          window.scrollTo(0, height2)
        }
        if (index === 3) {
          window.scrollTo(0, height3)
        }
      },
      getCarDetail: function () {
        let thisObj = this
        if (!thisObj.getCarDetailAjax) {
          return false
        }
        thisObj.getCarDetailAjax = false
        thisObj.$chaos.ajax({
          data: {
            mo_id: thisObj.mo_id
          },
          slient: true,
          // userinfo: true,
          url: 'Car/getCarDetail',
          callback: function (type, res) {
            thisObj.getCarDetailAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              var crumbs = []
              if (thisObj.cate === '搜索') {
                crumbs[0] = {
                  title: thisObj.cate,
                  link: ''
                }
                if (thisObj.skey === '') {
                  crumbs[1] = {
                    title: '全部',
                    link: '/FuzzySearch?skey=' + thisObj.skey
                  }
                } else {
                  crumbs[1] = {
                    title: thisObj.skey,
                    link: '/FuzzySearch?skey=' + thisObj.skey
                  }
                }
                crumbs[2] = {
                  title: res.result.list.mo_name,
                  link: ''
                }
              } else {
                crumbs[0] = {
                  title: thisObj.cate,
                  link: '/ProduceList'
                }
                crumbs[1] = {
                  title: res.result.list.mo_name,
                  link: ''
                }
              }
              if (thisObj.name !== '') {
                crumbs[0] = {
                  title: thisObj.name,
                  link: '/ProduceList'
                }
                if (thisObj.skey === '') {
                  crumbs[1] = {
                    title: '全部',
                    link: '/FuzzySearch?skey=' + thisObj.skey
                  }
                } else {
                  crumbs[1] = {
                    title: thisObj.skey,
                    link: '/FuzzySearch?skey=' + thisObj.skey
                  }
                }
                crumbs[2] = {
                  title: res.result.list.mo_name,
                  link: ''
                }
              }
              thisObj.$store.commit('crumbs', crumbs)
              thisObj.CarDetail = res.result.list
              setTimeout(function () {
                let galleryThumbs = new Swiper('.gallery-thumbs', {
                  spaceBetween: 10,
                  slidesPerView: 4,
                  freeMode: true,
                  navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                  },
                  watchSlidesVisibility: true,
                  watchSlidesProgress: true
                })
                let galleryTop = new Swiper('.gallery-top', {
                  spaceBetween: 10,
                  thumbs: {
                    swiper: galleryThumbs
                  }
                })
                console.log(galleryTop)
              }, 200)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        thisObj.cate = decodeURI(thisObj.$chaos.getQueryString('cate'))
        thisObj.name = decodeURI(thisObj.$chaos.getQueryString('name'))
        thisObj.skey = decodeURI(thisObj.$chaos.getQueryString('skey'))
        thisObj.mo_id = thisObj.$chaos.getQueryString('mo_id')
        thisObj.info.mo_id = thisObj.mo_id
        thisObj.getCarDetail()
      }
    }
  }
</script>
<style>
  .ivu-tooltip{
    margin-right:30px;
  }
  .ivu-btn{
    border-radius: 19px 19px;
    font-size: 17px;
    height: 38px;
    line-height: 11px;
    padding: 0px 20px;
    border: 2px solid #666666;
    color: #666666;
    margin-bottom: 20px;
  }
  .ivu-btn>span{
    vertical-align: 2px;
  }
  .main-title span {
    font-size: 16px!important;
  }
  .nocontent{
    text-align: center;
    clear: both;
    font-size: 20px;
    color: #949494;
    overflow: hidden;
    padding-top: 60px;
  }
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
  *{
    font-family: '微软雅黑';
  }
</style>
<style scoped>
  .swiper-container-horizontal{
    margin:30px auto 0px!important;
  }
  .splo_1 .swiper-container-horizontal img{
    width: 500px!important;
    height:500px!important;
  }
  .splo_2 .swiper-container-horizontal img{
    width:90px!important;
    height:90px!important;
  }
  .con_l{
    overflow: hidden;
  }
  .divClass2{
    position: fixed;
    width:955px;
    height: 137px;
    top: -60px;
    background: #fff;
    z-index:44444;
  }
  .updetail{
    overflow: hidden;
    margin:20px 0px;
  }
  .updetail>span{
    font-size: 20px;
    font-weight: 600;
    width:160px;
    letter-spacing: 3px;
    float: left;
  }
  .updetaila{
    margin-left:160px;
  }
  .con_l1,.con_l2,.con{
    width:410px;
    height: 60px;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
  }
  .con_l1>input,.con_l2>input,.con>input{
    width:100%;
    line-height: 40px;
    padding: 10px;
    font-size: 20px;
  }
  .con_l1{
    float: left;
  }
  .con_l2{
    float: right;
  }
  .con{
    width:100%;
  }
  .contance_btn{
    width:520px;
    height:60px;
    text-align: center;
    margin: 0 auto;
    background: url("../../static/image/ts_2.png");
    background-size: cover;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    border-radius: 10px 10px;
    letter-spacing: 3px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: rgb(119, 119, 119) 3px 4px 10px;
  }
  .contance_us{
    width:100%;
    height:480px;
    padding: 105px 20px;
    background: url("../../static/image/k_10.png");
    margin:50px 0px 0px;
  }
  .artice_con{
    overflow: hidden;
    padding-bottom: 80px;
  }
  .baseq{font-size: 18px;line-height: 32px;
    margin:50px 0px;}
  .base1{overflow: hidden;height:415px;}
  .base1>img{width:490px;height:415px;float: left}
  .base1>div{
    margin-left: 25px;
    width: 440px;
    border: 1px solid #cacaca;
    float: left;
  }
  .base1>div>ul>li{
    line-height: 45px;
    border-bottom: 1px solid #cacaca;
    padding: 0px 10px;
    font-size: 16px;
    font-weight: 600;
  }
  .base1>div>ul>li:last-child{
    border-bottom: 0px;
  }
  .artice_con h1{
    font-size: 30px;
    letter-spacing: 4px;
    font-weight: 600;
    margin:20px 0px ;
  }
  .pro_detailleft{
    width:500px;
    float: left;
    position: relative;
  }
  .pro_l{
    position: absolute;
    left:0px;
    top:600px;
    width:12px;
    height:19px;
    cursor: pointer;
  }
  .pro_r{
    position: absolute;
    right:0px;
    top:600px;
    width:12px;
    height:19px;
    cursor: pointer;
  }
  .assessmentlia{

  }
  .assessmentli {
    width: 100%;
    height: 50px;
    background: #d5f3fe;
    box-shadow: 3px 2px 4px #ccc;
    clear: both;
    overflow: hidden;
    margin: 86px 0px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .assessmentli li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .assessmentli li span {
    width: 149px;
    height: 50px;
    color: #000;
    font-size: 19px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
  }
  .assessmentli li:nth-child(2),.assessmentli li:nth-child(3){
    text-align: center;
  }
  .assessmentli li:nth-child(4){
    text-align: right;
  }
  .pro_detail{
    overflow: hidden;
  }
  .assessmentli li.active span,.assessmentli li span:hover{
    background: url("../../static/image/ts_2.png");
    background-size: cover;
    color: #fff;
    cursor: pointer;
  }
  .pro_detailright{
    width:390px;
    padding-left:35px;
    float: left;
  }
  .pro_detailright>div>ul{
    overflow: hidden;
    margin:33px 0px;
  }
  .pro_detailright>div>ul>li{
    width:40px;
    height:40px;
    background: #ccc;
    border:2px solid #4669df;
    float: left;
    margin-right: 30px;
  }
  .produce_btn{
    margin-top:120px;
    overflow: hidden;
    height:55px;
  }
  .produce_btn>span{
    width:165px;
    height:50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #fff;
    cursor: pointer;
  }
  .produce_btn>.span1{
    background: url("../../static/image/ts_2.png");
    background-size: cover;
    box-shadow: 3px 3px 4px #cacaca
  }
  .produce_btn>.span2{
    background: #ff7874;
    float: right;
  }
  .pro_detailright>div>h1{
    font-size:32px;
    font-weight: 600;
    margin:30px 0px 20px;
    letter-spacing: 5px;
  }
  .pro_detailright>div>h3{
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
  }
  .pro_detailright>div>p{
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: 600;
  }
  .pro_detailright>div>h3>span{color: #f10800}
  .answer_lo>h1{
    font-size: 30px;
    font-weight: 600;

    letter-spacing: 4px;
  }
  .ve_cp{
    overflow: hidden;
    margin-top:30px;
  }
  .vehicle_b>li:hover img, .vehicle_b>li.active img{
    border: 2px solid #abe8ff;
  }
  .ve_cp>li{
    float: left;
    margin-right:20px;
    color: #6d6d6d;
    font-size: 14px;
  }
  .ve_cp>li>span{
    float: left;
  }
  .ve_cp>li>ul{
    float: left;
  }
  .ve_cp li>ul>li{
    float: left;
    padding:0px 10px;
    line-height: 22px;
    border:1px solid #7790ec;
    color: #7790ec;
    text-align: center;
    margin-left:30px;
  }
  .ve_cp>li:last-child{
    float: right;
    margin-right:0px;
  }
  .vehicle_ac{
    width:480px;
    float: right;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .vehicle_a1{
    background: url("../../static/image/k_30.png");
    text-align: center;
    color: #fff;
    height: 45px;
    line-height: 50px;
    width: 198px;
    background-size: cover;
    font-size: 18px;
    float: left;
    cursor: pointer;
  }
  .vehicle_a2{
    border:1px solid #7790ec;
    text-align: center;
    color: #7790ec;
    height: 38px;
    line-height: 38px;
    width: 180px;
    font-size: 18px;
    float: right;
    margin-top:6px;
    cursor: pointer;
  }
  .brand_ul2 li{
    background: none!important;
  }
  .brand_ul2>li{
    padding-left: 0px!important;
    cursor: pointer;
    margin-bottom: 40px!important;
  }
  .brand_ul2>li:hover{
    color: #6d6d6d;
  }
  .case_p{
    margin-top:30px;
    color: #6d6d6d;
  }
  .case_p .fr{
    float: right;
  }
  .brand_ul2>li>img{
    width:350px;
    height:250px;
    float: left;
  }
  .brand_ul2>li>div{
    margin-left:380px;
    margin-top: 20px;
  }
  .brand_ul2>li h3{
    font-size: 28px;
    font-weight: 600;
  }
  .brand_ul2>li p{
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: justify;
  }
  .pageul{
    width:100%;
    text-align: center;
    overflow: hidden;
  }
  .brand_service_ul{
    overflow: hidden;
    width: 100%;
    min-height:1700px;
  }
  .topc ul li {
    cursor: pointer;
  }
  .brand_ul2>li {
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    text-align: left;
    list-style-type: none;
    background: url(../../static/image/zx_8.png) no-repeat;
    padding-left: 33px;
    background-position: 8px 6px;
    background-size: 13px;
  }
  .brand_ul2>li h3 {
    margin-bottom: 20px;
  }
  .brand_ul2>li p {
    line-height: 33px;
    font-size: 16px;
    height:99px;
  }
  .vehicle, .vehicle_b{
    width:100%;
    clear: both;
    overflow: hidden;
  }
  .vehicle_b>li img{
    border:2px solid #4aaff7;
    width:155px;
    height:155px;
    cursor: pointer;
  }
  .vehicle_b{
    margin: 0px -12px;
  }
  .vehicle_a{
    overflow: hidden;
    margin: 0px -32px;
  }
  .vehicle_b>li p{
    text-align: center;
    margin:20px 0px;
    font-size: 18px;
    font-weight: 500;
  }
  .vehicle_b>li{
    width:216.6px;
    float: left;
    text-align: center;
  }
  .vehicle_a>li{
    width:103px;
    overflow: hidden;
    float: left;
    text-align: center;
    height:70px;
  }
  .vehicle_a li.active span,.vehicle_a li span:hover{
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    background:url("../../static/image/p_21.png");
    background-size: cover;
    color: #fff;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    font-size: 18px;
  }
  .vehicle_a li span{
    font-size: 18px;
    display: inline-block;
    width:35px;
    height:35px;
    border-radius: 50%;
    color: #000;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
  }
  .vehicle>h3{
    font-size: 18px;
    line-height: 40px;
    margin:20px 0px;
    font-weight: 600;
  }
  .main-body {
    background: url(../../static/image/o_15.png) center top no-repeat;
    padding: 20px 0 50px;
  }
  .main-content {
    width: 1300px;
    margin: 0 auto;
  }
  .right {
    float: right;
  }
  .main-title .crumbs-icon{
    display: inline-block;
    width: 15px;
    height:15px;
    background-image: url("../../static/image/hierarchy-icon.png");
    background-size: 100% 100%;
    transform: translateY(2px);
    margin: 0 5px;
  }
  .main-title .current-position{
    color: #47A7FE;
  }
  .car-name{
    padding-top: 20px;
    font-size: 24px;
  }
  .car-info{
    padding-top: 20px;
  }
  .car-info .right-module{
    width: 289px;
  }
  .car-info .right-item .module-title{
    background: url("../../static/image/k_29.png") center center no-repeat;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
  }
  .car-info .right-item .module-content{
    padding:10px 0;
  }
  .car-info .right-item .history .year{
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 3px;
    padding-top: 15px;
  }
  .car-info .right-item .history li{
    line-height: 40px;
    padding-left:20px;
    position: relative;
    font-size: 14px;
    color:#888;
  }
  .car-info .right-item .history li .dot{
    width:6px;
    height:6px;
    border-radius: 50%;
    background: #3D6AE6;
    position: absolute;
    left: 0;
    top: 17px;
  }
  .car-info .right-item .look-all{
    color: #000;
    font-size: 14px;
    text-align: right;
    padding-top: 10px;
  }
  .enter-arrow-icon{
    width:6px;
    height: 11px;
    display: inline-block;
    background-image: url("../../static/image/k_20.png");
  }
  .recommend li{
    padding-bottom: 10px;
  }
  .right-module-car{
    position: relative;
  }
  .right-module-car img{
    display: block;
    width:100%;
  }
  .right-module-car .car-cover{
    position: absolute;
    bottom:0;
    left:0;
    right: 0;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    letter-spacing: 2px;
  }
  .recommend li .advantage{
    letter-spacing: 2px;
    line-height: 24px;
    padding-top: 15px;
    color: #666;
  }
  .recommend li>a{
    display: block;
  }
  .review .car-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .review .review-content{
    padding:10px 0;
    color: #666;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 2px;
  }
  .review h4{
    padding: 10px 0;
    font-size: 20px;
    font-weight: 100;
  }
  .review a{
    display: block;
  }
  .answer_lo{
    float: left;
    width:955px;
  }
</style>
